<template>
	<view class="container">
		<TopBtn v-if="type==1" :title="'新增药方'"></TopBtn>
		<TopBtn v-if="type==2" :title="'修改药方'"></TopBtn>
		<view class="inputBox">
			<view class="title">
				药方名称：
			</view>
			<textArea v-model="prescriptionName" :inputNane='prescriptionName' class="mt_30" :maxNum="100"></textArea>
		</view>
		<view class="inputBox flex1">
			<view class="title flex-sp-center">
				药方内容：
				<view class="flex-center-center" @click="addFormItem()">
					<image class="remove" src="@/static/prescription/add.png" mode=""></image> 添加药品
				</view>
			</view>
			<view class="">
				<form>
					<view class="inuptRow flex-sp-center mt_30" v-for="(item, index) in formItems" :key="index">
						<text></text>
						<uni-combox class="nameinput" :candidates="DrugInfoList" placeholder="请输入药品名称"
							v-model="item.name"></uni-combox>
						<uni-combox :candidates="glist" placeholder="用量" v-model="item.dosage"></uni-combox>
						<uni-combox :candidates="DrugDecoctionList" placeholder="煎法" v-model="item.DecoctionMethod"></uni-combox>
						<image @click="removeFormItem(index)" class="remove" src="@/static/prescription/gb.png" mode="aspectFit"></image>
					</view>
				</form>
			</view>
		</view>
		<view class="kong">
			
		</view>
		<view class="CommonToolsbtn flex-center-center" @click="createDoctorPrescription()">
			保存
		</view>
	</view>
</template>

<script>
	import {
		getDrugInfoList,
		getDrugDecoctionList,
		createDoctorPrescription,
		getDoctorPrescription,
		updateDoctorPrescription
	} from '@/api/commonTools'
	export default {
		data() {
			return {
				prescriptionName: "",
				formItems: [{
						name: '',
						dosage: "",
						DecoctionMethod: ""
					} // 初始表单条目
				],
				glist: [],
				DrugDecoctionList: [],
				DrugInfoList: [],
				id: "",
				data: {},
				type: 1

			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.type = 2
				this.getDoctorPrescription()
			}
			this.getDrugInfoList()
		},
		methods: {
			getDoctorPrescription() {
				getDoctorPrescription({
					id: this.id
				}).then(res => {
					this.data = res.data
					this.prescriptionName = res.data.prescriptionName
					this.formItems = JSON.parse(res.data.prescriptionContent)
				})
			},
			createDoctorPrescription() {
				if (this.type == 1) {
					uni.showLoading({
						title: '添加中',
						mask: true
					})
					createDoctorPrescription({
						prescriptionName: this.prescriptionName,
						prescriptionContent: JSON.stringify(this.formItems)
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading()
							uni.$emit('show', true)
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 200); // 3000毫秒后执行
					})
				} else {
					this.data.prescriptionName = this.prescriptionName
					this.data.prescriptionContent = JSON.stringify(this.formItems)
					uni.showLoading({
						title: '修改中',
						mask: true
					})
					updateDoctorPrescription(this.data).then(res => {
						setTimeout(() => {
							uni.hideLoading()
							uni.$emit('show', true)
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
						}, 200); // 3000毫秒后执行
					})
				}

			},
			getDrugInfoList() {
				getDrugInfoList().then(res => {
					this.DrugInfoList = res.data
				})
				getDrugDecoctionList().then(res => {
					this.DrugDecoctionList = res.data
				})
				for (var i = 0; i < 60; i++) {
					this.glist.push(`${i+1}g`);
				}
			},
			addFormItem() {
				this.formItems.push({
					name: '',
					dosage: "",
					DecoctionMethod: ""
				});
			},
			removeFormItem(index) {
				this.formItems.splice(index, 1);
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/deep/.uni-easyinput__content-textarea {
		min-height: 100rpx !important;
	}

	.flex1 {
		flex: 1;
	}

	.inputBox {
		width: 750rpx;
		min-height: 317rpx;
		background: #FFFFFF;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		margin: 30rpx 0 0 0;

		.title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			view {
				font-weight: bold;
				font-size: 28rpx;
				color: #3B6CFE;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.uni-easyinput {
		margin-right: 15rpx;
	}

	.uni-combox {
		flex: 1;
		margin-right: 15rpx;
	}

	.nameinput {
		flex: 1.7;
	}

	/deep/.uni-input-placeholder {
		font-size: 22rpx
	}

	/deep/.uni-input-input {
		font-size: 22rpx
	}

	.inuptRow {
		&>text {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #3B6CFE;
			border-radius: 50%;
			margin-right: 11rpx;
		}
	}

	.remove {
		width: 34rpx;
		height: 34rpx;
	}
</style>